<template>
  <div class="customer-box">
    <div class="statistics-box-top">
      <h3>新老客户交易构成</h3>
    </div>
    <div class="statistics-box-bot">
      <div class="sel-box">
        <div class="block">
          <el-date-picker
            v-model="value"
            style="width:160px"
            type="month"
            placeholder="选择日期"
            value-format="yyyy-MM"
            @change="selTime"
          />
        </div>
        <!-- <div
class="exportBtn"
             @click="exportBtn"
>导出数据</div> -->
      </div>
      <div class="msg-box">
        <div class="msg-box-lf">
          <div class="msg-lf-new">
            <span>新客户</span>
            <div class="cus-bar">
              <el-progress
                color="#39E2CC"
                :stroke-width="26"
                :percentage="newBar"
              />
            </div>
          </div>
          <div class="msg-lf-ord">
            <span>老客户</span>
            <el-progress
              color="#FFC038"
              :stroke-width="26"
              :percentage="oldBar"
            />
          </div>
        </div>
        <div class="msg-box-lr">
          <ul>
            <li class="th">
              <div />
              <div>付款金额</div>
              <div>较前一月</div>
              <div>付款人数</div>
              <div>较前一月</div>
            </li>
            <li>
              <div>新客户</div>
              <div>￥{{ tableData.NewClientTotalPrice }}</div>
              <div>
                <div
                  v-if="newPrice"
                  class="top"
                >↑</div>
                <div
                  v-else
                  class="bot"
                >↓</div>
                {{ tableData.NewClientTotalPriceCompare }}
              </div>
              <div>{{ tableData.NewClientCount }}</div>
              <div>
                <div
                  v-if="newClient"
                  class="top"
                >↑</div>
                <div
                  v-else
                  class="bot"
                >↓</div>
                {{ tableData.NewClientCountCompare }}
              </div>
            </li>
            <li>
              <div>老客户</div>
              <div>￥{{ tableData.OldClientTotalPrice }}</div>
              <div>
                <div
                  v-if="oldPrice"
                  class="top"
                >↑</div>
                <div
                  v-else
                  class="bot"
                >↓</div>
                {{ tableData.OldClientTotalPriceCompare }}
              </div>
              <div>{{ tableData.OldClientCount }}</div>
              <div>
                <div
                  v-if="oldClient"
                  class="top"
                >↑</div>
                <div
                  v-else
                  class="bot"
                >↓</div>
                {{ tableData.OldClientCountCompare }}
              </div>
            </li>
          </ul>
        </div>
      </div>
      <customerEchart />
    </div>

  </div>
</template>
<script>
import customerEchart from '../comptent/customerEchart'
import { getNewOldList } from '@/api/statistics.js'
import { constants } from 'crypto'
export default {
  components: {
    customerEchart
  },
  data() {
    return {
      value: '',
      tableData: [],
      time: null,
      newBar: 0,
      oldBar: 0,
      newClient: true,
      newPrice: true,
      oldClient: true,
      oldPrice: true
    }
  },
  created() {
    // this.
    const date = new Date()
    const year = date.getFullYear()
    let month = date.getMonth()
    if (month < 10) {
      month = '0' + (date.getMonth() + 1)
    }
    this.time = `${year}-${month}`
    this.getData()
  },
  mounted() { },
  methods: {
    // 获取数据
    getData() {
      getNewOldList({
        dateTime: this.time
      }).then(res => {
        console.log(res, 111)
        if (res.data.NewClientCount + res.data.OldClientCount !== 0) {
          this.newBar =
            (res.data.NewClientCount /
              (res.data.NewClientCount + res.data.OldClientCount)) *
            100
        } else {
          this.newBar = 0
        }
        if (res.data.NewClientCount + res.data.OldClientCount !== 0) {
          this.oldBar =
            (res.data.OldClientCount /
              (res.data.NewClientCount + res.data.OldClientCount)) *
            100
        } else {
          this.oldBar = 0
        }
        if (res.data.NewClientCountCompare.slice(0, 1) === '-') {
          res.data.NewClientCountCompare = res.data.NewClientCountCompare.slice(
            1,
            -1
          )
          this.newClient = false
        } else {
          this.newClient = true
        }
        if (res.data.NewClientTotalPriceCompare.slice(0, 1) === '-') {
          res.data.NewClientTotalPriceCompare = res.data.NewClientTotalPriceCompare.slice(
            1,
            -1
          )
          this.newPrice = false
        } else {
          this.newClient = true
        }
        if (res.data.OldClientCountCompare.slice(0, 1) === '-') {
          res.data.OldClientCountCompare = res.data.OldClientCountCompare.slice(
            1,
            -1
          )
          this.oldClient = false
        } else {
          this.oldClient = true
        }
        if (res.data.OldClientTotalPriceCompare.slice(0, 1) === '-') {
          res.data.OldClientTotalPriceCompare = res.data.OldClientTotalPriceCompare.slice(
            1,
            -1
          )
          this.oldPrice = false
        } else {
          this.oldPrice = true
        }
        this.tableData = res.data
      })
    },
    // 选择时间
    selTime() {
      console.log(this.value)
      if (!this.value) {
        const date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth()
        this.time = `${year}-${month + 1}`
        this.getData()
      } else {
        this.time = this.value
        this.getData()
      }
    },
    // 导出数据
    exportBtn() { }
  }
}
</script>

